<template>
  <div class="news">
    <ul>
      <li v-for="item in topNews" :key="item.uniquekey" class="news-item">
        <Row :gutter="16" type="flex" justify="space-between" class="news-row">
          <Col v-for="(pic, index) in getPics(item)" :key="index" span="8" class="news-image-col">
            <img v-lazy="pic" class="news-image" />
          </Col>
        </Row>
        <div class="news-content">
          <h2>{{ item.title }}</h2>
          <p class="author">{{ item.author_name }}</p>
        </div>
        <Divider class="divider" />
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Indicator } from 'mint-ui'
export default {
  mounted () {
    if (this.$store.state.topNews.length === 0) {
      Indicator.open()
      this.$store.dispatch('getTopNews').finally(() => {
        Indicator.close()
      })
    }
  },
  computed: {
    ...mapState(['topNews'])
  },
  methods: {
    getPics(item) {
      const pics = []
      if (item.thumbnail_pic_s) pics.push(item.thumbnail_pic_s)
      if (item.thumbnail_pic_s02) pics.push(item.thumbnail_pic_s02)
      if (item.thumbnail_pic_s03) pics.push(item.thumbnail_pic_s03)
      return pics
    }
  }
}
</script>

<style lang="scss" scoped>
.news {
  padding-top: 50px;
  margin-bottom: 62px;
  background-color: #f9f9f9;
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .news-item {
    background-color: #fff;
    margin: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s;
    &:hover {
      transform: translateY(-5px);
    }
  }
  .news-row {
    padding: 10px;
  }
  .news-image-col {
    padding: 5px;
  }
  .news-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
  }
  .news-content {
    padding: 10px;
    h2 {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
      color: #333;
      line-height: 1.5;
    }
    .author {
      margin: 5px 0 0;
      font-size: 14px;
      color: #999;
    }
  }
  .divider {
    margin: 0;
    height: 1px;
    background-color: #eee;
  }
}
</style>
